import {
  adoptsSubmit,
  getCuesSubmitPage,
  scoresSubmit,
  searchTreeOrganization,
} from '@/services/api/api-cues-submit';
import { findTagColor } from '@/utils/findTagColor';
import { CheckCircleOutlined, FileImageOutlined, PaperClipOutlined } from '@ant-design/icons';
import { ModalForm, ProFormDigit } from '@ant-design/pro-form';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { Space, Table, Tag, Typography, message } from 'antd';
import { DefaultOptionType } from 'antd/lib/select';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import DetailsSubmit from '../../topic/components/DetailsSubmit';

interface TableSubmitProps {
  onDetails: (id: string, name: string) => void;
}

const TableSubmit: React.FC<TableSubmitProps> = (props) => {
  const { onDetails } = props;
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [articleOrganizations, setArticleOrganizationState] = useState<any[]>([]);

  /**
   * 加载 组织 列表
   * @param key
   */
  const treeOrganizationData = async () => {
    try {
      const response = await searchTreeOrganization();
      if (response.code === 0) {
        setArticleOrganizationState(response.data);
        console.log(response.data);

      }
    } catch (error) { }
  };

  useEffect(() => {
    if (access.线索上报x主动报送x选题列表x收录线索) {
      treeOrganizationData();
    }
  }, []);

  const filter = (inputValue: string, path: DefaultOptionType[]) =>
    path.some(
      (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );

  return (
    <ProTable<CuesSubmitData.SubmitPage>
      columns={[
        {
          title: '上报单位',
          hideInTable: true,
          hideInSearch: !access.线索上报x选题计划x选题列表x收录线索,
          key: 'organizationIds',
          valueType: 'cascader',
          colSize: 4,
          fieldProps: {
            multiple: true,
            options: articleOrganizations,
            showSearch: { filter },
          },
        },
        {
          title: '上报线索',
          dataIndex: 'articleName',
          // copyable: true,
          ellipsis: true,
          width: '300px',
          align: 'center',
          key: 'articleName',
          render: (dom, record, _index, action) => {
            return (
              <div
                style={{
                  textAlign: 'left',
                  textOverflow: 'ellipsis',
                  whiteSpace: "nowrap",
                  overflow: 'hidden'
                }}
              >
                {record.isImage === 1 ? <FileImageOutlined /> : <></>}
                {record.isFile === 1 ? <PaperClipOutlined /> : <></>}
                {access.线索上报x选题计划x选题列表x详情页面 ? (
                  <DetailsSubmit
                    table='submit'
                    id={record.id}
                    name={record.articleName}
                    onRefurbish={() => {
                      actionRef.current?.reload();
                    }}
                  />
                ) : (
                  <a
                    onClick={() => {
                      message.error('无访问权限');
                    }}
                  >
                    {record.articleName}
                  </a>
                )}
              </div>
            );
          },
        },
        {
          title: '选题主题',
          key: 'topicName',
          dataIndex: 'topicName',
          ellipsis: true,
          search: false,
          align: 'center',
          width: '300px',
          render: (dom, record) => {
            return (
              <div
                style={{
                  textAlign: 'left',
                  textOverflow: 'ellipsis',
                  whiteSpace: "nowrap",
                  overflow: 'hidden'
                }}
              >
                <Typography.Text ellipsis={true} type="secondary">
                  <a
                    onClick={(e) => {
                      onDetails(record.topicId, record.topicName);
                    }}
                    key="topicName"
                  >
                    {record.topicName}
                  </a>
                </Typography.Text>
              </div>
            );
          },
        },
        // {
        //   title: '选题计划',
        //   key: 'topicPlanName',
        //   dataIndex: 'topicPlanName',
        //   ellipsis: true,
        //   search: false,
        //   align: 'center',
        //   width: '200px',
        //   render: (dom, record) => {
        //     return (
        //       <div
        //         style={{
        //           textAlign: 'left',
        //           textOverflow: 'ellipsis',
        //           whiteSpace: "nowrap",
        //           overflow: 'hidden'
        //         }}
        //       >
        //         <Typography.Text ellipsis={true} type="secondary">
        //           <a
        //             onClick={(e) => {
        //               onDetails(record.topicId, record.topicName);
        //             }}
        //             key="topicPlanName"
        //           >
        //             {record.topicPlanName}
        //           </a>
        //         </Typography.Text>
        //       </div>
        //     );
        //   },
        // },
        {
          title: '行业',
          dataIndex: 'articleIndustryName',
          key: 'articleIndustryName',
          width: '80px',
          align: 'center',
          search: false,
        },
        {
          title: '单位',
          key: 'articleOrganizationTopName',
          dataIndex: 'articleOrganizationTopName',
          width: '230px',
          search: false,
          align: 'center',
          render: (_, row) => (
            <div
              style={{
                textAlign: 'left',
                marginLeft: '16px'
              }}
            >
              <Tag color={findTagColor(row.articleOrganizationTopName)}>{row.articleOrganizationTopName}</Tag>
              {row.articleOrganizationName}
            </div>
          ),
        },
        {
          title: '新闻联络人',
          dataIndex: 'articleAccountName',
          // copyable: true,
          ellipsis: true,
          search: false,
          width: '100px',
          align: 'center',
          key: 'articleAccountName',
        },
        {
          title: '上报日期',
          dataIndex: 'createdTimes',
          key: 'createdTimes',
          valueType: 'dateRange',
          hideInTable: true,
          fieldProps: {
            allowClear: true,
            placeholder: ['开始日期', '结束日期'],
            format: 'YYYY-MM-DD',
            ranges: {
              今日: [moment(), moment()],
              本月: [moment().startOf('month'), moment().endOf('month')],
              上月: [
                moment().startOf('month').subtract(1, 'months'),
                moment().endOf('month').subtract(1, 'months'),
              ],
              最近7天: [moment().subtract(6, 'days'), moment()],
              最近60天: [moment().subtract(59, 'days'), moment()],
              最近90天: [moment().subtract(89, 'days'), moment()],
            },
          },
        },
        {
          title: '创建时间',
          dataIndex: 'createdTime',
          key: 'createdTime',
          width: '180px',
          align: 'center',
          search: false,
        },
        {
          title: '是否录用',
          dataIndex: 'isAdopt',
          key: 'isAdopt',
          valueType: 'select',
          width: '80px',
          align: 'center',
          fixed: 'right',
          hideInTable: !access.线索上报x选题计划x选题列表x收录线索,
          valueEnum: {
            0: { text: '未录用' },
            1: { text: '已录用' },
          },
          render: (_, record) => (
            <Space>
              <Tag color={record.isAdopt === 0 ? '#F9CF59' : '#1AA15F'} key="isAdopt">
                {record.isAdopt === 0 ? '未录用' : '已录用'}
              </Tag>
            </Space>
          ),
        },
        {
          title: '评分',
          dataIndex: 'score',
          key: 'score',
          width: '50px',
          align: 'center',
          fixed: 'right',
          search: false,
          hideInTable: !access.线索上报x选题计划x选题列表x评分线索,
        },
        // {
        //   title: '刊播情况',
        //   dataIndex: 'isPublish',
        //   key: 'isPublish',
        //   valueType: 'select',
        //   width: '80px',
        //   align: 'center',
        //   // hideInSearch: access.选题报送x配置x分类x媒体,
        //   // hideInTable: access.选题报送x配置x分类x媒体,
        //   valueEnum: {
        //     0: { text: '未刊播' },
        //     1: { text: '已刊播' },
        //   },
        //   render: (_, record) => (
        //     <Space>
        //       <Tag color={record.isPublish === 0 ? '#CCCCCC' : '#1AA15F'} key="isPublish">
        //         {record.isPublish === 0 ? '查看' : '查看'}
        //       </Tag>
        //     </Space>
        //   ),
        // },
      ]}
      actionRef={actionRef}
      request={async (params = {}) => {
        if (params.organizationIds) {
          const organizationParentIds: string[] = [];
          let organizationIds: string[] = [];

          params.organizationIds.forEach((item: string | any[]) => {
            if (item.length === 1) {
              organizationParentIds.push(item[0]);
            } else if (item.length > 1) {
              organizationIds.push(item[1]);
            }
          });
          organizationParentIds.forEach((id) => {
            const ids = articleOrganizations.find((item) => item.id === id).children;
            organizationIds = organizationIds.concat(ids.map((item: any) => item.id));
          });
          params.articleOrganizationIds = organizationIds;
        }

        const response = await getCuesSubmitPage({
          ...params,
        });

        return Promise.resolve({
          data: response.data.data,
          total: response.data.total,
          success: response.code === 0,
        });
      }}
      rowKey="id"
      dateFormatter="string"
      bordered
      search={{
        collapsed: false,
        labelWidth: 'auto',
        collapseRender: false,
      }}
      sticky
      scroll={{
        x: '1300px',
      }}
      rowSelection={
        access.线索上报x选题计划x选题列表x收录线索 && {
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          type: 'checkbox',
        }
      }
      tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {
        return (
          <Space size={24}>
            <span>
              已选 {selectedRowKeys.length} 项
              <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                取消选择
              </a>
            </span>
          </Space>
        );
      }}
      tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {
        return (
          <Space size={16}>
            <ModalForm
              key={'adapt_modal_form'}
              layout={'horizontal'}
              title={
                <>
                  <CheckCircleOutlined style={{ fontSize: '18px', color: '#87d068' }} />
                  <span
                    style={{
                      marginInlineStart: 10,
                    }}
                  >
                    批量收录
                  </span>
                </>
              }
              trigger={<a>批量收录</a>}
              autoFocusFirstInput
              modalProps={{
                destroyOnClose: true,
                width: '500px',
              }}
              submitTimeout={2000}
              onFinish={async (values) => {
                const response = await adoptsSubmit({ ids: selectedRowKeys });
                if (response.code === 0) {
                  message.success('批量收录成功');
                  onCleanSelected();
                  actionRef?.current?.reload();
                  return true;
                } else {
                  return true;
                }
              }}
            >
              <Typography.Paragraph>是否确认批量收录</Typography.Paragraph>
            </ModalForm>
            <ModalForm
              key={'score_modal_form'}
              layout={'horizontal'}
              title={
                <>
                  <CheckCircleOutlined style={{ fontSize: '18px', color: '#87d068' }} />
                  <span
                    style={{
                      marginInlineStart: 10,
                    }}
                  >
                    批量评分
                  </span>
                </>
              }
              trigger={<a>批量评分</a>}
              autoFocusFirstInput
              modalProps={{
                destroyOnClose: true,
                width: '500px',
              }}
              submitTimeout={2000}
              onFinish={async (values) => {
                const response = await scoresSubmit({ ids: selectedRowKeys, ...values });
                if (response.code === 0) {
                  message.success('批量评分成功');
                  onCleanSelected();
                  actionRef?.current?.reload();
                  return true;
                } else {
                  return true;
                }
              }}
            >
              <Typography.Paragraph>是否确认批量评分</Typography.Paragraph>
              <ProFormDigit
                width="md"
                label="奖励"
                name="score"
                min={0.01}
                max={100}
                fieldProps={{ precision: 2 }}
                rules={[{ required: true, message: '请输入奖励' }]}
              />
            </ModalForm>
          </Space>
        );
      }}
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
        defaultPageSize: 20,
      }}
    />
  );
};

export default TableSubmit;
